<!--备用支付页面-->
<template>
  <div class="pay_container">
    <div class="back">
      <el-button link @click="handleGoBack">
        <el-icon><ArrowLeft /></el-icon>返回
      </el-button>
    </div>
    <div class="pay_info">
      <div class="order_status flex justify-between items-center">
        <div class="status">
          <div class="tip">订单提交成功，请尽快完成支付！</div>
          <div class="time">请在<span class="color-red">{{remainingTime}}分钟内</span>完成支付，超时后将取消订单！</div>
        </div>
        <div class="amount">
          待支付总金额：<span class="color-red">{{ orderInfo.account.toFixed(2) }}</span>元
        </div>
      </div>
      <div class="order_info">
        <div class="product_name mb-2">商品名称：<span class="ml-2 ">{{ orderInfo.name }}</span></div>
        <div class="order_time mb-2">下单时间：<span class="ml-2">{{ dayjs(orderInfo.orderTime).format('YYYY-MM-DD HH:MM:ss')  }}</span></div>
        <div class="pay_way mb-2">支持方式：<el-button class="ml-2"><div class="i-carbon:logo-wechat w-1.5em h-1.5em mr-2" style="color: #1E6FFF"></div>微信支付</el-button> <el-button >支付宝</el-button></div>
      </div>
    </div>
    <div class="flex justify-center">
      <div class="code">
        <div>扫一扫付款(元)</div>
        <div class="color-red ">￥{{ orderInfo.account.toFixed(2) }}</div>
        <div class="h-200px w-200px"><el-image :src="qrCode" size="20"></el-image></div>
        <div class="flex items-center gap-2 color-black"><div class="i-carbon:scan-alt w-1em h-1em" style="color: #ff0000;"></div>微信扫一扫支付</div>
        <div>本产品为虚拟内容，购买后不支持退换、转让</div>
        <div>确认支付表示您已阅读并接受<span class="color-#409eff ml-1 cursor-pointer" >用户协议</span></div>
        <div>如付款成功后，未收到商品，请<span class="color-#409eff ml-1 cursor-pointer">联系我们</span></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ArrowLeft} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {ref} from 'vue'
import dayjs from 'dayjs'
import qrCode from '@/assets/qrcode.jpeg'


const router = useRouter()
const handleGoBack=()=>{
  router.back()
}

const orderInfo=ref({
  name:'面试鸭 永久会员',
  account:129.00,
  orderTime:new Date(),
})

const remainingTime = ref(15)
const timeId = setInterval(()=>{
  if(remainingTime.value>0){
    remainingTime.value-=1
  }else{
    clearInterval(timeId)
  }

},60*1000)
</script>
<style lang="scss" scoped>
.pay_container{
  .pay_info{
    margin:20px;
    padding:20px;
    border-radius: 5px;
    height:200px;
    background-color: rgba(0,0,0,.1);
    .order_info{
      margin-top:20px;
    }
  }
  .code{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color:#666;
    gap:5px;
  }
}
</style>
